<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="../js/vue.js"></script>
</head>
<body>
<!--
    页面中显示的message需要进行字符串的翻转
    插值语法中支持运算  函数调用
    'hello'  =>  ['h','e'....] =>  [... 'e','h'] => 'olleh'
    不足:
       1. 代码无法复用  容器中多处需要使用同样的数据时 代码冗余
       2. 语义不明确

    解决方案:
       1. 自定函数    插值语法中调用自定义函数   效率低  计算结果无法复用

    计算属性     缓存
     模板内的表达式非常便利，但是设计它们的初衷是用于简单运算的。在模板中放入太多的逻辑会让模板过重且难以维护
     模板不再是简单的声明式逻辑。你必须看一段时间才能意识到，这里是想要显示变量 message 的翻转字符串。
     当你想要在模板中的多处包含此翻转字符串时，就会更加难以处理。
     所以，对于任何复杂逻辑，你都应当使用计算属性
-->
<div id="app">
    <p>{{message}}</p>
    <p>{{message.split('').reverse().join('')}}</p>
    <p>reverseMessageMethod():{{reverseMessageMethod()}}</p>
    <p>{{reverseMessageMethod()}}</p>
    <p>{{reverseMessageMethod()}}</p>
    <!--    计算属性-->
    <p>reverseMessageComputed:{{reverseMessageComputed}}</p>
    <p>reverseMessageComputed:{{reverseMessageComputed}}</p>
    <p>reverseNewMessageComputed:{{reverseNewMessageComputed}}</p>
    <p>reverseNewMessageComputed:{{reverseNewMessageComputed}}</p>
</div>


<script>

    let vm = new Vue({
        el: '#app',
        data: {
            message: 'hello'
        },
        methods: {
            reverseMessageMethod() {
                console.log('reverseMessageMethod')
                return this.message.split('').reverse().join('')
            }
        },
        //    计算属性
        computed: {
            // 计算属性名    访问计算属性时  自动调用get方法  方法的返回值就是计算属性的值
            reverseMessageComputed: {
                get() {
                    console.log('reverseMessageComputed')
                    return this.message.split('').reverse().join('')
                }
            },
            // 函数名字  表示计算属性的名字
            reverseNewMessageComputed() {
                console.log('reverseNewMessageComputed')
                return this.message.split('').reverse().join('')
            }

        }
    })
</script>


</body>
</html>